import Conditions from '@/component/conditions';
import { Condition } from '@/component/conditions/interface';
import Test from '@/pages/condition/test';
import { ModalService } from '@easy-antd/component';
import { Button, Modal } from 'antd';
import { useEffect, useState } from 'react';
import { history } from 'umi';
// import 'react-with-directive'
// import '@szld/directives'
import Example from '@/service/user.service';
import { HighLight } from '@luband/components';
import { defineDirective } from '@luband/directives';
import 'highlight.js/styles/base16/railscasts.css';

defineDirective('show', {
  install: (data): any => {
    if (data.value) {
      return true;
    }
    return null;
  },
});

export default function Page() {
  const [visible, setVisible] = useState<boolean>(false);
  const [show, setShow] = useState<boolean>(false);
  // const {setInitialState} = useModel('@@initialState');
  //
  // useEffect(() => {
  //   setInitialState({
  //     collapsed: false
  //
  //   });
  // }, []);

  useEffect(() => {
    Example.foo({ data: 100 }, { time: [200, 100, 300] }, '5').then((res) => {
      console.log(res);
    });
  }, []);

  function showModal(isVisible: boolean) {
    setVisible(isVisible);
  }

  function handleOk(data: Condition) {
    console.log(data);
    showModal(false);
  }

  // function addCondition() {
  //   ModalService.create({
  //     component: Condition,
  //     footer: null,
  //     width: '100%',
  //     title: '添加条件',
  //     bodyStyle: {
  //       maxHeight: 750,
  //       overflow: 'auto',
  //       display: 'flex',
  //       flexDirection: 'column',
  //     },
  //     props: {
  //       // 测试回显数据
  //       // value: testData
  //     },
  //   });
  // }

  function go() {
    history.push('/rule');
  }

  function open() {
    ModalService.create({
      component: Test,
      title: 'hah',
      props: {
        id: 123,
      },
    });
  }

  return (
    <div>
      <HighLight language={'javascript'} codeList={['console.log(123);']} />
      <Button onClick={() => setShow(!show)}>
        {show ? '隐藏' : '显示'}添加条件按钮
      </Button>
      <Button r-show={show} onClick={() => showModal(true)}>
        添加条件
      </Button>
      <Button onClick={open}>111111</Button>
      <Button onClick={go}>去rule</Button>
      <Modal
        visible={visible}
        width={'100%'}
        title={'添加条件'}
        footer={null}
        onCancel={() => showModal(false)}
        destroyOnClose={true}
        bodyStyle={{
          maxHeight: 750,
          overflow: 'auto',
          display: 'flex',
          flexDirection: 'column',
        }}
      >
        <Conditions onOk={(res) => handleOk(res)} />
      </Modal>
    </div>
  );
}
